<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=pie-nest
-->
<!DOCTYPE html>
<html >
    <head>
       
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
        <title>词云图</title>
        
        <!-- <script src="../static/js/jquery-3.2.0.min.js"  crossorigin="anonymous"></script> -->
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js" charset="utf-8"></script>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" charset="utf-8" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js" charset="utf-8"></script>
        <script src="../static/js/xlsx.full.min.js"  crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdn.bootcss.com/xlsx/0.12.7/xlsx.core.min.js"  charset="utf-8"></script>
        <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.min.css" rel="stylesheet">
        <!-- <link rel="stylesheet" href="../static/js/bootstrap.min.css" > -->
        <link rel="stylesheet" href="../static/css/bootstrap-table.min.css" >
        <!-- <script type="text/javascript" src="../static/js/bootstrap.min.js"></script> -->
        <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"  charset="utf-8"></script>
   <!--      <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js" charset="utf-8"></script> -->
        <link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
        
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js" charset="utf-8"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table-locale-all.js" charset="utf-8"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"  charset="utf-8"></script>
        
        
        

    </head>
    <style>
       .table .thead-blue th {
           color: #fff;
           background-color: #3195f1;
           border-color: #0d7adf;
           font-size: 0.6rem
       }

       .focusCell {
           border: 2px solid rgb(122, 124, 241) !important;
       }

       .dropdown-menu a {
           color: royalblue
       }
       /*.form-control {
          width:100%;
          display: block;
       }*/
       .form-select1 {
          width:200px;
          display:inline;
       }
       .optionss{
          text-align:center;
          width:100%;
       }
       
       
       
   </style>
   <style>
    #img {
        text-align:center; 
        width:100%;
         margin-top: 60px;
    }
    img{
        width: 300px;
        overflow: hidden;
        margin: 0 auto;
        
    }
    #img img{
        width: 40%;
        transition:all 2s;/*图片放大过程的时间*/
        position: relative;
    }
    img:hover{
        cursor: crosshair;
        transform: scale(2.0);  /*以y轴为中心旋转*/
    }
</style>

   
    <input id="filepath"  name="filepath"  value=""  type="hidden">
    <input id="rowe"  name="rowe"  value=""  type="hidden">
    <input id="bc"  name="bc"  value=""  type="hidden">
    <div class="table-box" style="margin: 5px">
        <div class="toolbar" style="width: 100%; margin-left: 20px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-center; justify-content: space-between;">
            <label for="MRP-file"    class=" btn btn-info">上传excel文件</label>
            <input id="MRP-file"  name="loadMRP"  type="file"  style="display:none">
        </div>
    </div>

    <div class="container-fluid">
        <div class="row" >
            <div class="col-md-12" >
                <table id="table" class="table-striped " style="table-layout:auto; font-size:1.4rem;">

                </table> 
            </div>
            
        </div>
    </div>

    </div>
    <div class="form-group optionss" style="position:absolute;">
            <!-- <input type="text" class="form-control form-control-xxx" value=""> -->
            <!-- <button class="btn btn-sm btn-danger">-</button> -->
            <select class="form-control form-select1" id="excelselect" onchange="getSelectValue();"/>
            </select>
            <select class="form-control form-select1" id="colorselect" onchange="colorSelectValue();"/>
                <option  value="">背景颜色</option>
                <option  value="1">白色</option>
                <option  value="2">黑色</option>
            </select> 
            <button class="btn btn-sm btn-success"  onclick="buttonstartdraw()">生成词云图</button>
            <button class="btn btn-sm btn-success"  onclick="downloadImg()">导出</button>
    </div>
    <br/><br/><br/><br/><br/>
    <div  id="img">
          <img class="image_normal" id="cyimg"   src="https://oscimg.oschina.net/oscnet/4b1ea24a-ff7f-4136-bf7b-dc1825633315.png"  / >
             
    </div>

     <script>

        document.getElementById("table").style.display="none";//隐藏
        $(".optionss").css("display","none");
        $(".col-md-12").css("height","60px");
        $(".fixed-table-container").css("height","1500px");
        $(".fixed-height").css("border","none");
        $(".fixed-height").css("border-bottom","0px");
        
        $(function () {

            var $table = $('#table')
            var loadData = []
            var tableColumns = []
            var unvisibleColumn = ['WK1_QTY', 'WK1_BALANCE', 'WK2_QTY', 'WK2_BALANCE', 'WK3_QTY', 'WK3_BALANCE', 'WK4_QTY', 'WK4_BALANCE',
                'WK5_QTY', 'WK5_BALANCE', 'WK6_QTY', 'WK6_BALANCE', 'WK7_QTY', 'WK7_BALANCE', 'WK8_QTY', 'WK8_BALANCE', 'WK9_QTY',
                'WK9_BALANCE', 'WK10_QTY', 'WK10_BALANCE', 'WK11_QTY', 'WK11_BALANCE', 'WK12_QTY', 'WK12_BALANCE', 'WK13_QTY', 'WK13_BALANCE']
            function Columns_Data(excelData) {
                var oneBuyerData = []

                var keys = tHead(excelData[0]);

                addColumnStyle = function (value, row, index, field) {
                    return { css: { "color": "blue" } }
                }

                tableColumns.push({ checkbox: true })
                $.each(keys, function (i, key) {
                    var column = {};
                    if ((key.substr(0, 2) == "WK") && (key.substr(key.length - 3, 3) == "QTY")) {
                        var addColumn = {}
                        addColumn['field'] = key.substr(0, key.length - 3) + "PO"
                        addColumn['title'] = key.substr(0, key.length - 3) + "PO"
                        addColumn['cellStyle'] = 'addColumnStyle'
                        addColumn['sortable'] = true;
                        addColumn['align'] = 'center';
                        tableColumns.push(addColumn)
                    }
                    if (unvisibleColumn.indexOf(key) >= 0) {
                        column['visible'] = false
                    }
                    column['field'] = key;
                    column['title'] = key;
                    column['sortable'] = true;
                    column['align'] = 'center';
                    if (key == 'SUPPLIER') {
                        // column['width'] = '100px';
                        column['align'] = 'left';
                    }
                    tableColumns.push(column)
                })

                $.each(excelData, function (i, item) {
                    if ($.trim(item.BUYER_NAME) == $.trim($("#buyer").text())) {
                        oneBuyerData.push(item)
                    }
                })

                $table.bootstrapTable('refreshOptions', {
                    columns: tableColumns,
                    data: oneBuyerData
                })
            }

            // $table.on('all.bs.table', function (e, name, args) {
            //     console.log(name, args)
            // })

            $table.on('post-header.bs.table', function () {
                $("#table td").attr('contenteditable', true);
            })

            // $table.on('click-cell.bs.table', function (obj, field, value, row, $element) {
            //     $element.css('border', '1px solid redred')
            // })

            $('#table').on('click', 'td', function () {
                $(this).addClass('focusCell')
            })

            $('#table').on('blur', 'td', function () {
                $(this).removeClass('focusCell')
            })
     
            $table.bootstrapTable({
                // url: "json/data1.json",
                data: loadData,
                toolbar: ".toolbar",
                locale: "zh-CN",
                clickEdit: true,
                showRefresh: true,
                showColumns: true,
                search: true,
                pagination: true,       //显示分页条
                paginationVAlign: "top",
                showPaginationSwitch: true,     //显示切换分页按钮
                clickToSelect: true,  //点击row选中radio或CheckBox
                showExport: true,
                pageSize: 100,//每页默认条数
                pageNumber: 1,//默认打开y页面
                showExport: true,
                contentEditable: true,
                stickyHeader: true,
                theadClasses: "thead-blue",//设置thead-blue为表头样式
                columns: tableColumns,
                height: screen.availHeight - 110
            })

            $('#MRP-file').change(function (e) {
               var files = e.target.files;
               
               var formFile = new FormData();
               formFile.append("file", files[0]); //加入文件对象
                $.ajax({
                   url: "/upload_file",
                   data: formFile,
                   type: "post",
                   dataType: "json",
                   cache: false,//上传文件无需缓存
                   processData: false,//用于对data参数进行序列化处理 这里必须false
                   contentType: false, //必须
                   success: function (result) {
                        //alert("上传完成!");
                        console.log(result);
                        $("#filepath").val(result);//赋值
             
                        $.ajax({
                           url: "alldata?filepath="+result,
                           type: "get",

                           dataType: "json",
                           success: function (result2) {
                                console.log(result2);
                               
                                loadData = result2;
                                Columns_Data(loadData)
                                
                                //console.log(tableColumns)
                                var html_text = '<option  value="">请选择excel字段</option>';;
                                for(var s=1;s<tableColumns.length;s++){
                                    html_text +='<option  value="'+tableColumns[s]['title']+'">'+tableColumns[s]['title']+'</option>';
                                }
                                document.getElementById("excelselect").innerHTML = html_text;
                                document.getElementById("table").style.display="";//显示
                                $(".optionss").css("display","");
                                $(".col-md-12").css("height","500px");
                                $(".fixed-height").css("border","none");
                                


                               
                           },
                        })
                      
                        
                    },
               })
             
            });

            function tHead(data) {      //------------获得Excel数据的表头
                var h = new Array();
                var ii = 0;
                $.each(data, function (i, item) {
                    h[ii] = i;
                    ii = ii + 1;
                })
                return h;
            }


        })
    </script>
    <script>
        function getSelectValue(){
            var iteValue = $("#excelselect").find("option:selected").attr("value");
            //console.log('emoney的值:' + iteValue);
            $("#rowe").val(iteValue);//赋值
        };
        function colorSelectValue(){
            var iteValue = $("#colorselect").find("option:selected").attr("value");
            //console.log('emoney的值:' + iteValue);
            $("#bc").val(iteValue);//赋值
        };
        function buttonstartdraw(){
            var filepath = document.getElementById("filepath").value;
            var rowe = document.getElementById("rowe").value;
            var bc = document.getElementById("bc").value;

            if(rowe.length>0){
                
            }else{
               alert("请选择excel字段！！！");
               return;
            }
            if(bc.length>0){
                
            }else{
               alert("请选择背景颜色！！！");
               return;
            }
            $.ajax({
                   url: "/startdraw",
                   data: {"filepath":filepath,"rowe":rowe,"bc":bc},
                   type: "get",
                   dataType: "json",
                   success: function (result) {
                       //alert("上传完成!");
                       //console.log(result);
                       $("#cyimg").attr("src",result);
                   },
            })
        };
        function downloadImg(){
            var img = document.getElementById('cyimg'); // 获取要下载的图片
            var url = img.src;                            // 获取图片地址
            var a = document.createElement('a');          // 创建一个a节点插入的document
            var event = new MouseEvent('click')           // 模拟鼠标click点击事件
            a.download = 'beautifulGirl'                  // 设置a节点的download属性值
            a.href = url;                                 // 将图片的src赋值给a节点的href
            a.dispatchEvent(event)                        // 触发鼠标点击事件
         }

        
    </script>
    </body>
    
    

    
    

</html>
    